<template>
  <div>
    <h1>~ Welcome To You 红红火火恍恍惚惚或 ~</h1> 
    <div id="main"></div>
  </div>
</template>

<script>
var echarts = require('echarts');
export default {
  data() {
    return {};
  },
  mounted() {
    var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var paperDataURI = '';

option = {
    backgroundColor: '#0f375f',
    tooltip: {},
    legend: {
        data: ['all'],
        textStyle: {color: '#ddd'}
    },
    xAxis: [{
        data: ['小U购物节愿望清单', '', '珠穆朗玛\nQomolangma', '乞力马扎罗\nKilimanjaro'],
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            margin: 20,
            textStyle: {
                color: '#ddd',
                fontSize: 14
            }
        }
    }],
    yAxis: {
        splitLine: {show: false},
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {show: false}
    },
    markLine: {
        z: -1
    },
    animationEasing: 'elasticOut',
    series: [{
        type: 'pictorialBar',
        name: 'all',
        hoverAnimation: true,
        label: {
            show: true,
            position: 'top',
            formatter: '{c} m',
            fontSize: 16,
            color: '#e54035'
        },
        data: [{
            value: 13000,
            symbol: 'image://' + paperDataURI,
            symbolRepeat: true,
            symbolSize: ['130%', '20%'],
            symbolOffset: [0, 10],
            symbolMargin: '-30%',
            animationDelay: function (dataIndex, params) {
                return params.index * 30;
            }
        }, {
            value: '-',
            symbol: 'none',
        }, {
            value: 8844,
            symbol: 'image://' + ROOT_PATH + '/data/asset/img/hill-Qomolangma.png',
            symbolSize: ['200%', '105%'],
            symbolPosition: 'end',
            z: 10
        }, {
            value: 5895,
            symbol: 'image://' + ROOT_PATH + '/data/asset/img/hill-Kilimanjaro.png',
            symbolSize: ['200%', '105%'],
            symbolPosition: 'end'
        }],
        markLine: {
            symbol: ['none', 'none'],
            label: {
                show: false
            },
            lineStyle: {
                color: '#e54035',
                width: 2
            },
            data: [{
                yAxis: 8844
            }]
        }
    }, {
        name: 'all',
        type: 'pictorialBar',
        barGap: '-100%',
        symbol: 'circle',
        itemStyle: {
            color: '#185491'
        },
        silent: true,
        symbolOffset: [0, '50%'],
        z: -10,
        data: [{
            value: 1,
            symbolSize: ['150%', 50]
        }, {
            value: '-'
        }, {
            value: 1,
            symbolSize: ['200%', 50]
        }, {
            value: 1,
            symbolSize: ['200%', 50]
        }]
    }]
};

option && myChart.setOption(option);
  },
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 500px;
  margin: 0 auto;
}
h1{
  height: 50px;
  line-height: 50px;
  margin-left: 20px;
  font-size: 24px;
}
</style>
